<template>
	<view class="">
		<view class="nav_tab">
			<text :class="{'active':navIdx===1}" @click="navTap(1)">商品</text>
			<text :class="{'active':navIdx===2}" @click="navTap(2)">付款说明</text>
		</view>
		<view class="notes" v-show="navIdx===2">
			<!-- <view class="title"> <text>付款说 明</text> </view> -->
			<jyf-parser class="content" :html="discount.payinfo"></jyf-parser>
		</view>
		<view class="body" v-show="navIdx===1">
			<view class="menu_list">
				<text class="menu_li" v-for="item in shopMenu" :class="{'active':menuIdx===item.id}"
					@click="menuTap(item.id)">
					<text style="font-weight: bold;">{{item.title}}</text>
				</text>
			</view>
			<view class="shop_list" id="body">
				<view class="list_wp" v-for="(item,idx) in shopList" :id="setId(item.id)" :key="idx">
					<view class="l_title1" v-if="item.title== '团购'">▋{{item.title}}</view>
					<view class="l_title" v-if="item.title!= '团购'">▋{{item.title}}</view>
					<view class="shop_li" v-for="citem in item.goodsList" :key="citem.id"
						@click="citem.isgroup==1&&$navTo('/pages/product/groupbuy?id='+citem.id)">
						<image :src="citem.img" mode=""></image>
						<view class="shop_right">
							<text class="title">{{citem.title}}</text>
							<view class="sales"v-if="citem.isgroup==1">已售 {{citem.sales}}</view>
							
							<view class="sales_z"v-if="citem.isgroup==1">{{citem.mark}}</view>
							<view class="m_money_g"v-if="citem.isgroup==1">团购价 ¥{{citem.price}}  
								<text style="font-size: 22rpx;color: #999;padding-left: 10rpx;" v-if="citem.isgroup==1">¥{{citem.productprice}}</text>
							</view>
							<view class="m_money"v-if="citem.isgroup!=1">{{citem.price}}</view>
							

							<view class="price" v-if="citem.isgroup!=1">
								<view class="grade">
									<text class="label">VIP</text>
									<text>{{citem.vipprice}}元</text>
								</view>
								<view class="grade grade1">
									<text class="label">会员</text>
									<text>{{citem.cusprice}}元</text>
								</view>
							</view>
						</view>
						<view class="s_label">
							<text class="content" v-for="label in citem.labels">{{label}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MenuList',
		props: ['uid', 'discount'],
		data() {
			return {
				navIdx: 1,
				menuIdx: 1,
				oldTop: '',

				shopMenu: [],
				shopList: [],
			}
		},
		mounted() {
			if (!uni.getStorageSync('token')) {
							return;
						}
			this.getshopMenu();
			this.getList();
		},
		methods: {
			getshopMenu() {
				this.$axios('supplierGoods/cate', 'POST', 'shop', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.shopMenu = res.data.data;
						this.menuIdx = this.shopMenu.length > 0 ? this.shopMenu[0].id : '';
					}
				})
			},
			getList() {
				this.$axios('supplierGoods/goodsList', 'POST', 'shop', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.shopList = res.data.data;
					}
				})
			},
			navTap(v) {
				if (this.navIdx === v) return;
				this.navIdx = v;
			},
			menuTap(v) {
				if (this.menuIdx === v) return;
				this.menuIdx = v;
				this.setpPage('#list' + v);
			},
			setId(v) {
				return 'list' + v;
			},
			setpPage(id) {
				let query = uni.createSelectorQuery().in(this);
				const promise = new Promise((res, rej) => {
					query.select('#body').boundingClientRect(data => {
						this.oldTop = this.oldTop === '' ? data.top : this.oldTop;
						res(data);
					}).exec()
				})
				promise.then(res => {
					query.select(id).boundingClientRect(data => {
						uni.pageScrollTo({
							duration: 10,
							scrollTop: data.top - res.top + this.oldTop + 10
						})
					}).exec()
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.nav_tab {
		border-bottom: 1px #DCDFE6 solid;
		border-top: 1px #DCDFE6 solid;
		font-size: 32upx;
		color: #666;

		text {
			display: inline-block;
			padding: 20upx;
			position: relative;
		}

		.active {
			color: #000;
		}

		.active::after {
			border-bottom: 2px $bg-color solid;
			content: '';
			position: absolute;
			bottom: 5upx;
			left: 50%;
			transform: translateX(-50%);
			width: 30upx;
		}
	}

	.body {
		display: flex;
		overflow: hidden;
		padding-top: 20upx;

		.menu_list {
			background: rgb(247, 249, 251);
			width: 25%;

			.menu_li {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20upx;
				height: 110upx;

				text {
					width: 100%;
				}
			}

			.menu_li:nth-of-type(1) {
				padding-top: 20upx;
			}

			.active {
				background: #fff;
			}
		}

		.shop_list {
			flex: 1;
			padding-left: 20upx;

			.list_wp {
				.l_title {
					color: #ee0505;
					font-size: 30rpx;
					padding: 10upx 10upx;
					margin-right: 10rpx;
					font-weight: bold;
				}
				.l_title1 {
					color: #590bc7;
					font-size: 30rpx;
					padding: 10upx 10upx;
					margin-right: 10rpx;
					font-weight: bold;
				}
			}

			.shop_li {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 20upx;

				image {
					border-radius: 20upx;
					height: 155upx;
					width: 155upx;
				}

				.shop_right {
					box-sizing: border-box;
					padding: 0upx 20upx;
					width: calc(100% - 155upx);

					.title {
						color: #000;
						font-weight: bold;
						font-size: 30upx;
					}
					.sales {
						color: #999;
						font-size: 25upx;
					}
					.sales_z {
						color: #ee0505;
						font-size: 24upx;
						font-weight: bold;
						text-align:center;
						border-radius: 10upx;
						border: 1px #fccdcd solid; 
						padding: 1upx 1upx;
						width: 90rpx;
					}
					.m_money_g {
						color: #ee0505;
						font-size: 30upx;
						font-weight: bold;
					}
					.m_money {
						color: #555;
						font-size: 32upx;
					}

					.m_money::before {
						content: '￥';
						font-size: 26upx;
					}

					.price {
						padding-top: 10upx;
						display: flex;
						align-items: center;

						.grade {
							color: $bg-color;
							font-size: 22upx;

							.label {
								background: #000;
								border-radius: 10upx;
								color: #f3dd91;
								padding: 4upx 8upx;
							}

							text {
								font-weight: bold;
								padding: 0 10upx;
							}
						}

						.grade1 {
							.label {
								background: #f3dd91;
								color: #927419;
							}
						}
					}
				}

				.s_label {
					display: flex;
					align-items: center;
					padding-top: 20upx;
					flex: 1;

					.content {
						border: 1px #DCDFE6 solid;
						border-radius: 10upx;
						line-height: 40upx;
						margin-right: 10upx;
						padding: 0 10upx;
					}
				}
			}

		}
	}
</style>